<template>
	<m-layout title="个人资料" gap="24">
		<m-block class="userinfo">

			<view class="flex-center">
				<m-button className="flex-column flex-center " bgColor="unset" spa="50 0 20" openType="chooseAvatar"
					@chooseavatar="chooseavatar">
					<m-image :src="userinfo.headPicUrl" wh="120" radius="130"></m-image>
				</m-button>
			</view>
			<!-- @click="setNameShow = true" -->
			<m-cell title="昵称" :rightText="userinfo.nicKname || userinfo.userName" @click="setNameShow = true"> </m-cell>
			<m-cell title="邀请码" :rightText="userinfo.invcode" :rIcon="false" @click="doCopy(userinfo.invcode)"></m-cell>
			<m-cell title="注册时间" :rIcon="false" <text slot="right">{{userinfo.createtime | times([0,11])}}</text>
			</m-cell>
			<m-cell title="邀请人" :rightText="userinfo.invuser || ''" :rIcon="false" :border="0"
				:gap="userinfo.invid?'24':'20 24'">
				<button class="getPhone" slot="right" radius="10  " @click="blindShow = true"
					v-if="userinfo.invid<=0">绑定</button>
			</m-cell>

			<!--<m-cell title="认证资料" :rightText="userinfo.idcard?'查看':'暂未认证'" :border="0"
				@click="userinfo.idcard?Jump('/pages/mine/certification/certified'):Jump('/pages/mine/certification/information')"></m-cell> -->
		</m-block>

		<m-block class="settings" spa="24 0 0 0">
			<template v-if="userinfo.phone">
				<m-cell title="手机号" :rightText="userinfo.phone" :rIcon="false"> </m-cell>
			</template>
			<template v-else>
				<m-cell title="手机号" :rightText="false" :rIcon="false" gap="20 24">
					<button class="getPhone" slot="right" radius="10  " @click="phoneShow = true">绑定</button>
				</m-cell>
			</template>

			<!-- <m-cell @click="userinfo.emaill?false:Jump('/pages/mine/userInfo/setAccount/setAccount')" title="邮箱"
				:rightText="userinfo.emaill || '未设置'" :rIcon="userinfo.emaill?'':'icon-qianjin'"></m-cell> -->
			<m-cell @click="Jump('/pagesA/mine/address/address')" title="我的收货地址"></m-cell>
			<m-cell @click="Jump('/pages/wallet/bankList/bankList')" title="我的银行卡"></m-cell>
			<m-cell @click="Jump('/pagesA/mine/userInfo/setPay/setPay')" title="支付密码"
				:rightText="userinfo.paypassword=='1'?'修改':'设置'" />
			<m-cell @click="userinfo.isv==0?Jump('/pagesA/mine/authentication/authentication'):false" title="实名认证"
				:rIcon="userinfo.isv==0?'icon-qianjin':false" :rightText="userinfo.isv==0?'未认证':'已认证'" />
		</m-block>

		<m-button block spa="50 0 0" @click="Jump('/start?code=back')">切换账号</m-button>

		<m-dialog title="修改昵称" :loading="userLoading" :showCancel="true" v-model="setNameShow"
			@handleCancel="setNameShow = false" @handleConfirm="setName">
			<view class="setName-box">
				<view class="form-Item">
					<input type="nickname"  v-model="nickname" placeholder="请输入昵称">
				</view>
				<view class="hint">
					<text>昵称长度不超过20个字符</text>
				</view>
			</view>
		</m-dialog>

		<m-dialog title="店铺代码" :loading="blindLoading" :showCancel="true" v-model="blindShow"
			@handleCancel="blindShow = false" @handleConfirm="bindInvcode">
			<view class="setName-box">
				<view class="form-Item">
					<input type="text" v-model="invcode" placeholder="请输入上级店铺代码">
				</view>
			</view>
		</m-dialog>

		<m-dialog title="绑定手机号" :loading="phoneLoading" :showCancel="true" v-model="phoneShow"
			@handleCancel="phoneShow = false" @handleConfirm="BindPhone">
			<view class="setName-box">
				<m-input v-model="phone" placeholder="请输入绑定的手机号"></m-input>
				<m-input spa="20 0 " gap="10 20" v-model="code" placeholder="请输入验证码">
					<m-sendCode v-model="phone" slot="right"></m-sendCode>
				</m-input>

			</view>
		</m-dialog>

	</m-layout>
</template>

<script>
	import { Upload, GetAppVersion, UploadWebUrl } from '@/api/Ctrls.js'
	import { SetHeadpic, SetNickname, bindInvcode, UserInfo, BindPhone } from '@/api/Users.js'
	import { mapState, mapActions } from 'vuex'
	import { email, mobile } from "@/libs/fn/verify"
	export default {
		data() {
			return {
				code: '',
				phone: '',
				phoneLoading: false,
				phoneShow: false,

				blindLoading: false,
				blindShow: false,
				invcode: '',

				//设置名称
				idcardShow: false,
				setNameShow: false,
				nickname: '',
				userLoading: false,
				exitLoading: false,
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo
			}),
		},
		onShow() {
			UserInfo();
		},
		watch: {
			setNameShow(val) {
				if (!val) {
					this.nickname = '';
					this.userLoading = false;
				}
			},
		},
		methods: {
			...mapActions({
				exit: 'user/exit'
			}),
			async BindPhone() {
				if (!this.phone) {
					return this.Toast('请输入绑定的手机号')
				}
				if (!this.code) {
					return this.Toast('请输入验证码')
				}
				this.phoneLoading = true
				const { msg, success } = await BindPhone({
					phone: this.phone,
					code: this.code,
				})
				this.phoneLoading = false
				this.Toast(msg)
				if (success) {
					this.phoneShow = false
				}

			},
			async bindInvcode() {
				if (!this.invcode) {
					return this.Toast('请输入上级邀请码')
				}
				this.blindLoading = true;
				const { success, msg } = await bindInvcode({
					invcode: this.invcode,
				})
				if (!success) {

					this.Toast(msg)
				}
				this.blindLoading = false;
				this.blindShow = false;
			},
			async getuserinfo(e) {
				console.log(e)
			},
			async setName() {
				if (!this.nickname) {
					return this.Toast('请输入昵称')
				}
				if (this.nickname.length > 20) {
					return this.Toast('昵称长度不超过20个字符')
				}
				this.userLoading = true;
				const { success } = await SetNickname({
					nickname: this.nickname,
				})
				this.userLoading = false;
				this.setNameShow = false;
			},
			async exits() {
				this.exitLoading = true;
				const success = await this.exit();
				this.Jump('/pages/login/login')
				this.exitLoading = false;
			},
			async chooseavatar({ detail: { avatarUrl } }) {
				let bast64 = uni.getFileSystemManager().readFileSync(avatarUrl, 'base64')
				uni.showLoading()
				const { success, msg, data } = await UploadWebUrl({
					ctype: 2,
					content: bast64,
				})

				if (!success) {
					return this.Toast('操作失败')
				}
				const sets = await SetHeadpic({
					headpic: msg
				});
				this.Toast(sets.msg)
				uni.hideLoading()






			},
			async uploadAvatar(type) {
				try {
					const { tempFilePaths, tempFiles } = await this.chooseFile();
					const { data, success: fileStatus, msg: fileMsg } = await Upload(tempFilePaths[0]);
					if (!fileStatus) {
						this.Toast(fileMsg);
						return;
					}
					const { success, msg } = await SetNicknameHeadpic({
						nickname: this.userinfo.nickname,
						headpic: data
					});
				} catch (e) {
					console.log('uploadAvatar', e)
					this.Toast(e.message);
					//TODO handle the exception
				}
			},
		},
	}
</script>

<style lang="scss">
	.dialog-box {
		padding: 50rpx 24rpx;
		font-size: 24rpx;
	}

	.icon-Menu {
		position: absolute;
		right: 10%;
		bottom: 3%;
	}

	.getPhone {
		display: inline-block;
		margin: 0;
		border-width: 0.5px;
		border-style: solid;
		border-color: var(--theme);
		border-image: initial;
		font-size: 26rpx;
		font-family: "PingFang SC", "PingFang SC";
		padding: 8rpx 34rpx;
		border-radius: 10rpx;
		transform: rotate(0deg);
		background: var(--theme);
		color: #fff;
		line-height: unset;

		&::after {
			display: none;
		}

	}

	.setName-box {
		padding: 24rpx 0;

		.form-Item {
			background: #f6f6f6;
			border-radius: 15rpx;
			box-sizing: border-box;

			input {
				border-radius: 15rpx;
				padding: 20rpx 28rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #111;

			}
		}

		.hint {
			padding: 24rpx 0 0;
			font-size: 24rpx;
			color: var(--text_1);
		}
	}
</style>